<template>
    <div class="container">
        <mt-header title="宝宝准确信息">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="menstruation_start">
            <label for="">
                请选择宝宝出生日期:
                <input type="text" placeholder="2018-04-03" v-model="pickerVisible">
                <img src="../../images/icon_01.png" alt="">
                <mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月"
                    date-format="{value} 日">
                </mt-datetime-picker>
                <mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm">
                </mt-datetime-picker>
            </label>
        </div>
        <div class="gender-box">
            <div class="gender-nan">
                <img src="../../images/icon_man.png" alt="">
            </div>
            <div class="gender-nv">
                <img src="../../images/icon_woman.png" alt="">
            </div>
        </div>

        <div class="next">
            <button>下一步</button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>
<style scoped>
    .mint-header {
        background: #7fffaa;
        font-size: 20px;
        height: 50px;
        border-bottom: 1px solid #fff;
        color: #00000075;
    }

    .menstruation_start label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 10px;
        font-size: 14px;
    }

    .menstruation_start label input {
        width: 45%;
        height: 30px;
        margin-bottom: 0;
        text-align: center;
    }

    .menstruation_start label img {
        width: 25px;
        height: 25px;
    }

    .menstruation_start {
        background-color: #fff;
        height: 60px;
        line-height: 60px;
    }

    .gender-box {
        display: flex;
        justify-content: space-around;
        margin-top: 60px;
    }

    .gender-nan,
    .gender-nv {
        text-align: center;
    }

    .gender-nan img,
    .gender-nv img {
        width: 72%;
        height: 60%;
    }

    .next {
        margin-top: 100px;
        padding: 0 20px;
    }

    .next button {
        width: 100%;
        height: 50px;
        color: pink;
    }
</style>